<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div>
        <el-card shadow="hover">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="120px">
            <el-form-item label="拼团编号" prop="collageCode">
              <el-input
                v-model="queryParams.collageCode"
                placeholder="请输入拼团编号"
                clearable />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="queryCollageAccountData">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>
    <div v-if="collageAccountLogVo" style="margin-top: 10px">
      <el-card v-if="collageAccountLogVo.shopVo">
        <template #header>
          <div class="card-header">
            店铺信息
          </div>
        </template>
        <div>
          <el-descriptions
            direction="vertical"
            :column="3"
            border>
            <el-descriptions-item label="店铺头像">
              <image-preview :src="collageAccountLogVo.shopVo.headPortrait" width="100px" height="100px"/>
            </el-descriptions-item>
            <el-descriptions-item label="店铺名称">{{collageAccountLogVo.shopVo.name}}</el-descriptions-item>
            <el-descriptions-item label="店铺状态">
              <dict-tag :options="shop_status" :value="collageAccountLogVo.shopVo.shopStatus" />
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
      <el-card v-if="collageAccountLogVo.cardCollageAccountDetailLogList" v-for="(cardCollageAccountDetailLog, index) in collageAccountLogVo.cardCollageAccountDetailLogList" :key="index" style="margin-top: 10px">
        <template #header>
          <div class="card-header">
            <el-row>
              <el-col :span="12" align="left">
                <dict-tag :options="collage_account_detail_type" :value="cardCollageAccountDetailLog.detailType" />
              </el-col>
              <el-col :span="12" align="right">
                <el-link type="primary">
                  预计结算时间：{{parseTime(cardCollageAccountDetailLog.finalTime, '{y}-{m}-{d}')}}
                </el-link>
              </el-col>
            </el-row>
          </div>
        </template>
        <div>
          <el-descriptions
            direction="vertical"
            :column="6"
            border>
            <el-descriptions-item label="商品金额">{{cardCollageAccountDetailLog.totalPrice}}</el-descriptions-item>
            <el-descriptions-item label="销售金额">{{cardCollageAccountDetailLog.saleTotalPrice}}</el-descriptions-item>
            <el-descriptions-item label="店铺优惠券金额">{{cardCollageAccountDetailLog.shopDiscountsTotalMoney}}</el-descriptions-item>
            <el-descriptions-item label="平台优惠券金额">{{cardCollageAccountDetailLog.officialDiscountsTotalMoney}}</el-descriptions-item>
            <el-descriptions-item label="满减活动金额">{{cardCollageAccountDetailLog.fullSubtractTotalMoney}}</el-descriptions-item>
            <el-descriptions-item label="首单优惠活动金额">{{cardCollageAccountDetailLog.firtstDiscountsTotalMoney}}</el-descriptions-item>
            <el-descriptions-item label="手续费金额">{{cardCollageAccountDetailLog.totalServiceMoney}}</el-descriptions-item>
            <el-descriptions-item label="手续费减免金额">{{cardCollageAccountDetailLog.reductionServiceMoney}}</el-descriptions-item>
            <el-descriptions-item label="手续费补缴金额">{{cardCollageAccountDetailLog.compensationMoney}}</el-descriptions-item>
            <el-descriptions-item label="实收手续费金额">{{cardCollageAccountDetailLog.realityTotalServiceMoney}}</el-descriptions-item>
            <el-descriptions-item label="实际到账金额">{{cardCollageAccountDetailLog.realityIntoMoney}}</el-descriptions-item>
            <el-descriptions-item label="汇款状态">
              <div>
                <dict-tag :options="remittance_status" :value="cardCollageAccountDetailLog.remittanceStatus" />
              </div>
              <div style="margin-top: 5px">
                {{parseTime(cardCollageAccountDetailLog.remittanceTime)}}
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
      <el-card style="margin-top: 10px" v-if="collageAccountLogVo.cardCollageVo">
        <el-descriptions
          direction="vertical"
          title="账单合计"
          :column="7"
          border>
          <template #extra v-if="collageAccountLogVo.cardCollageVo && (!collageAccountLogVo.cardCollageAccountDetailLogList || collageAccountLogVo.cardCollageAccountDetailLogList.length == 0)">
            <el-link type="danger">发货完成后显示账单信息</el-link>
          </template>
          <el-descriptions-item label="拼团封面">
            <image-preview :src="collageAccountLogVo.cardCollageVo.imagePath" width="80px" height="80px"/>
          </el-descriptions-item>
          <el-descriptions-item label="拼团名称">{{collageAccountLogVo.cardCollageVo.collageName}}</el-descriptions-item>
          <el-descriptions-item label="拼团编号">{{collageAccountLogVo.cardCollageVo.collageCode}}</el-descriptions-item>
          <el-descriptions-item label="商品金额">{{collageAccountLogVo.totalPrice}}</el-descriptions-item>
          <el-descriptions-item label="销售金额">{{collageAccountLogVo.saleTotalPrice}}</el-descriptions-item>
          <el-descriptions-item label="店铺优惠券金额">{{collageAccountLogVo.shopDiscountsTotalMoney}}</el-descriptions-item>
          <el-descriptions-item label="平台优惠券金额">{{collageAccountLogVo.officialDiscountsTotalMoney}}</el-descriptions-item>
          <el-descriptions-item label="满减活动金额">{{collageAccountLogVo.fullSubtractTotalMoney}}</el-descriptions-item>
          <el-descriptions-item label="首单优惠活动金额">{{collageAccountLogVo.firtstDiscountsTotalMoney}}</el-descriptions-item>
          <el-descriptions-item label="手续费金额">{{collageAccountLogVo.totalServiceMoney}}</el-descriptions-item>
          <el-descriptions-item label="手续费减免金额">{{collageAccountLogVo.reductionServiceMoney}}</el-descriptions-item>
          <el-descriptions-item label="手续费补缴金额">{{collageAccountLogVo.compensationMoney}}</el-descriptions-item>
          <el-descriptions-item label="实收手续费金额">{{collageAccountLogVo.realityTotalServiceMoney}}</el-descriptions-item>
          <el-descriptions-item label="实际到账金额">{{collageAccountLogVo.realityIntoMoney}}</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
  </div>
</template>

<script setup name="CollageAccountLog" lang="ts">
import { queryCollageAccount } from '@/api/system/collageAccountLog';
import {
  CollageAccountLogForm,
  CollageAccountLogQuery,
  CollageAccountLogVO
} from '@/api/system/collageAccountLog/types';
import { parseTime } from '../../../utils/ruoyi';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { collage_account_detail_type, remittance_status, shop_status } = toRefs<any>(proxy?.useDict('collage_account_detail_type', 'remittance_status', 'shop_status'));

const collageAccountLogVo = ref<CollageAccountLogVO>();

const data = reactive({
  queryParams: {
    collageCode: undefined,
  },
});

const { queryParams } = toRefs(data);

const queryCollageAccountData = async () => {
  const res = await queryCollageAccount(queryParams.value);
  collageAccountLogVo.value = res.data;
  proxy?.$modal.msgSuccess('操作成功');
};
</script>
